<template>
  <n-el :id="props.id" tag="div" class="box-main" :style="{
    width: getWidth(props.width),
    height: getHeight(props.height),
    margin: props.margin
  }">
    <n-el tag="div" class="box-top">
    </n-el>
    <n-el tag="div" class="box-bottom">
    </n-el>
    <n-el tag="div" class="box-left">
    </n-el>
    <n-el tag="div" class="box-right">
    </n-el>
    <n-el tag="div" class="box-left-top">
    </n-el>
    <n-el tag="div" class="box-right-top">
    </n-el>
    <n-el tag="div" class="box-left-bottom">
    </n-el>
    <n-el tag="div" class="box-right-bottom">
    </n-el>
    <n-el tag="div" class="title">
      <slot name="title">
        {{ titleData }}
      </slot>
    </n-el>
    <n-el tag="div" class="box-content">
      <n-el tag="div">
        <slot  name="content">
        </slot>
      </n-el>
    </n-el>
  </n-el>
</template>

<script lang="ts" setup name="HzBox6">

// eslint-disable-next-line no-undef
import {loadEchartsData} from "/@api/hz-bigscreen-api.js";

const props = defineProps({
  id: {
    type: String,
    default: 'hz-box-6'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  margin: {
    type: String,
    default: '5px 5px 5px 5px' // 上右下左
  },
  title: {
    type: String,
    default: '请求标题ing'
  },
  apiPath: { // api路径
    type: String,
    default: ''
  },
  chartsType: { // 图表类型
    type: String,
    default: 'hzBox'
  },
  methodType: {
    type: String, // 请求方式
    default: 'get'
  },
});

const titleData = ref(props.title)

// 刷新图表方式，该方法需要提供给外部调用
// eslint-disable-next-line no-unused-vars
const refreshCharts = (data:any) => {
  titleData.value = data.title
};
// 刷新图表  根据apiPath，method，type query获取数据
const refreshChartsByApi = async (query : any) => {
  // 如果query中没有封装type则给query添加type属性
  if (!query.hasOwnProperty('chart_type')) {
    query.chart_type = props.chartsType
  }
  const s = await loadEchartsData(props.apiPath, props.methodType, query)
  refreshCharts(s.data)
}

// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
  refreshChartsByApi
});

function getWidth(width) {
  // 以空格split
  return `calc(${width} - 2px - ${props.margin?.split(' ')[1]} - ${props.margin?.split(' ')[3]})`
}

function getHeight(height) {
  return `calc(${height} - 2px - ${props.margin?.split(' ')[0]} - ${props.margin?.split(' ')[2]})`
}

</script>

<style scoped lang="less">

.box-main{
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-left{
  position: absolute;
  top: 33px;
  left: 0;
  width: 32px;
  height: calc(100% - 16px);
  background-image: url("src/assets/hz-box/6/left_line.png");
}

.box-right{
  position: absolute;
  top: 33px;
  right: 0;
  width: 44px;
  height: calc(100% - 16px);
  background-image: url("src/assets/hz-box/6/right_line.png");
}

.box-top{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  background: linear-gradient(to right, #053380, rgba(5, 51, 128, 0.0));
}

.box-bottom{
  position: absolute;
  bottom: 0;
  left: 32px;
  width: calc(100% - 64px);
  height: 9px;
  background-image: url("src/assets/hz-box/6/line_bottom.png");
}

.box-left-top{
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 29px;
  background-image: url("src/assets/hz-box/6/left_top.png");
  background-repeat: no-repeat;
}

.box-right-top{
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 36px;
  background-image: url("src/assets/hz-box/6/right_top.png");
  background-repeat: no-repeat;
}

.box-left-bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 9px;
  background-image: url("src/assets/hz-box/6/left_bottom.png");
  background-repeat: no-repeat;
}

.box-right-bottom{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 44px;
  height: 9px;
  background-image: url("src/assets/hz-box/6/right_bottom.png");
  background-repeat: no-repeat;
}

.box-content{
  position: absolute;
  top: 32px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 35px);
}

.title{
  position: absolute;
  top: 0;
  left: 35px;
  width: 100%;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}


</style>
